<template>
  <!-- 闯关记录 -->
  <div class="op-container">
    <!-- <img src="@/assets/img/demo.png" alt=""> -->
    <hq-searchDown ref="hqSearchDown" :select-opts="selectOpts" @click="handleFilter" />

    <div class="filter-container">
      <span style="margin-left: 0;" class="filter-title filter-item">身份所属</span>
      <k-select
        v-model="listQuery.identityBelong"
        class="filter-item right-item"
        style="width:120px"
        :select-params="dict.type.IDENTITY_TYPE"
        @handleSelectEvent="$refs.hqSearchDown.searchFun()"
      />

      <span class="filter-title filter-item">活动主题</span>
      <k-select
        v-model="listQuery.activityId"
        class="filter-item right-item"
        style="width:120px"
        :custom-params="{ opations: activitylist, label: 'activityTheme', value: 'id' }"
        @handleSelectEvent="openCheckpoint"
      />

      <span v-if="listQuery.activityId" class="filter-title filter-item">关卡</span>
      <k-select
        v-if="listQuery.activityId"
        v-model="listQuery.checkpoint"
        class="filter-item right-item"
        style="width:120px"
        :custom-params="{ opations: getCustomsPassList, label: 'lineName', value: 'lineId' }"
        @handleSelectEvent="$refs.hqSearchDown.searchFun()"
      />

      <span class="filter-title filter-item">关卡状态</span>
      <k-select
        v-model="listQuery.checkpointStatus"
        class="filter-item right-item"
        style="width:120px"
        :select-params="[
          { label: '已解锁', value: 'UNLOCK' },
          { label: '进行中', value: 'ONGOING' },
          { label: '匹配中', value: 'preparation' },
          { label: '托管中', value: 'HOSTING' },
          { label: '成功', value: 'SUCCESS' },
          { label: '失败', value: 'FAILURE' }
        ]"
        @handleSelectEvent="$refs.hqSearchDown.searchFun()"
      />

      <span class="filter-title filter-item">领取状态</span>
      <k-select
        v-model="listQuery.getStatus"
        class="filter-item right-item"
        style="width:120px"
        :select-params="[{ label: '已领取', value: 'ISTORECEIVE' }, { label: '未领取', value: 'NOTORECEIVE' }, { label: '已作废', value: 'OUTOFSERVICE' }]"
        @handleSelectEvent="$refs.hqSearchDown.searchFun()"
      />

      <span class="filter-title filter-item">房间类型</span>
      <k-select
        v-model="listQuery.roomType"
        class="filter-item right-item"
        style="width:120px"
        :select-params="[{ label: '玩家对战房', value: 2 }, { label: '主播对战房', value: 3 }]"
        @handleSelectEvent="$refs.hqSearchDown.searchFun()"
      />
      <span class="filter-title filter-item">是否加赛</span>
      <k-select
        v-model="listQuery.fenceOffFlag"
        class="filter-item right-item"
        style="width:120px"
        :select-params="[{ label: '是', value: 0 }, { label: '否', value: 1 }]"
        @handleSelectEvent="$refs.hqSearchDown.searchFun()"
      />
      <br>
      <span class="filter-title filter-item">解锁时间</span>
      <k-date-picker v-model="timeValue" class="filter-item" @hqchang="$refs.hqSearchDown.searchFun()" />

      <span class="filter-title filter-item">对战时间</span>
      <k-date-picker v-model="timeCotinue" class="filter-item" @hqchang="$refs.hqSearchDown.searchFun()" />
    </div>

    <!--表格相关 -->
    <el-table
      ref="multipleTable"
      :data="listData"
      fit
      border
      :show-summary="authorityHandle(217)"
      :summary-method="getSummaries"
      highlight-current-row
      style="width: 100%;border-radius:8px;"
      :header-cell-style="{ background: '#F6F5FA', color: '#4E4F62' }"
      @sort-change="sortChange"
    >
      <el-table-column width="80px" type="index" label="序号" align="center" />
      <el-table-column prop="mobile" min-width="100px" label="用户名" align="center" show-overflow-tooltip />
      <el-table-column prop="activityTheme" min-width="100px" label="活动主题" align="center" show-overflow-tooltip />
      <el-table-column prop="checkpoint" min-width="100px" label="关卡" align="center" show-overflow-tooltip />
      <el-table-column prop="checkpointStatus" min-width="100px" label="关卡状态" align="center" show-overflow-tooltip />
      <el-table-column prop="checkpointPrice" min-width="100px" label="关卡价值" align="center" show-overflow-tooltip />
      <el-table-column prop="openPrice" min-width="100px" label="开箱获得" align="center" show-overflow-tooltip />
      <el-table-column
        prop="totalPrice"
        min-width="100px"
        label="累计获得"
        align="center"
        sortable="custom"
        show-overflow-tooltip
      />
      <el-table-column prop="getStatus" min-width="100px" label="领取状态" align="center" show-overflow-tooltip />
      <!-- roomType -->
      <el-table-column min-width="150px" label="房间类型" align="center">
        <template slot-scope="scope">
          {{ scope.row.roomType | roomTypeFilter }}
        </template>
      </el-table-column>

      <el-table-column
        prop="unlockTime"
        min-width="150px"
        label="解锁时间"
        align="center"
        sortable="custom"
        show-overflow-tooltip
      />
      <el-table-column
        prop="battleTime"
        min-width="150px"
        label="对战时间"
        align="center"
        sortable="custom"
        show-overflow-tooltip
      />
      <el-table-column
        prop="fenceOffFlag"
        min-width="150px"
        label="是否加赛"
        align="center"
        sortable="custom"
        show-overflow-tooltip
      />

      <el-table-column prop="roomId" min-width="150px" label="房间ID" align="center" show-overflow-tooltip />
      <el-table-column min-width="200px" label="操作" align="center" fixed="right">
        <template slot-scope="scope">
          <div class="op-div">
            <k-button class="table-btn" value="房间详情" @click.native="toDetails(scope.row)" />
            <k-button class="table-btn" value="累计获得" @click.native="toAccumulate(scope.row)" />
          </div>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="totalRows > 0"
      :total="totalRows"
      :page.sync="listQuery.pager.pageNo"
      :limit.sync="listQuery.pager.pageSize"
      @pagination="loadData"
    />

    <!-- 房间详情 -->
    <k-dialog
      :show-hide.sync="detailsShow"
      :modal-append-to-body="false"
      :append-to-body="true"
      title="房间详情"
      class-name="details_dialog"
      :show-foot="false"
      :two-btn="false"
    >
      <div v-if="detailData.win" class="details_box">
        <div class="details_title">
          <div class="title-item" />
          <div class="title-item">用户名</div>
          <div class="title-item oaa">开箱获得饰品</div>
          <div class="title-item">饰品总价值</div>
          <div class="title-item">最终获得</div>
          <div class="title-item borderNone">获得晶粹</div>
        </div>
        <div class="details_data left">
          <div class="data-item">获胜者</div>
          <div class="data-item">{{ detailData.win.mobile }}</div>
          <div class="data-item oaa">
            <el-tooltip effect="dark" :content="detailData.win.goodsNames" placement="bottom">
              <span>{{ detailData.win.goodsNames }}</span>
            </el-tooltip>
          </div>
          <div class="data-item">{{ detailData.win.openPrice }}</div>
          <div class="data-item">
            <el-tooltip effect="dark" :content="detailData.win.endGoodNames" placement="bottom">
              <div class="text">{{ detailData.win.endGoodNames }}</div>
            </el-tooltip>
          </div>
          <div class="data-item borderNone">{{ detailData.win.ammoPrice }}晶粹</div>
        </div>
        <div class="details_data left">
          <div class="data-item">失败者</div>
          <div class="data-item">{{ detailData.lose.mobile }}</div>
          <div class="data-item oaa">
            <el-tooltip effect="dark" :content="detailData.lose.goodsNames" placement="bottom">
              <span>{{ detailData.lose.goodsNames }}</span>
            </el-tooltip>
          </div>
          <div class="data-item">{{ detailData.lose.openPrice }}</div>
          <div class="data-item">
            <el-tooltip effect="dark" :content="detailData.lose.endGoodNames" placement="bottom">
              <div class="text">{{ detailData.lose.endGoodNames }}</div>
            </el-tooltip>
          </div>
          <div class="data-item borderNone">{{ detailData.lose.ammoPrice }}晶粹</div>
        </div>
      </div>
    </k-dialog>

    <!-- 累计获得 -->
    <k-dialog
      :show-hide.sync="accumulateShow"
      :modal-append-to-body="false"
      :append-to-body="true"
      title="累计获得"
      class-name="accumulate_dialog"
      :show-foot="false"
      :two-btn="false"
    >
      <div class="accumulate_box">
        <div class="accumulate-item">
          <div class="single level">关卡</div>
          <div class="single goods">饰品</div>
          <div class="single price">价值</div>
        </div>
        <div v-for="(item, index) in accumulateData" :key="index" class="accumulate-item">
          <div class="single level">{{ item.checkpoint }}</div>
          <div class="single goods">
            <el-tooltip effect="dark" :content="item.goodsNames" placement="bottom">
              <span>{{ item.goodsNames }}</span>
            </el-tooltip>
          </div>
          <div class="single price">{{ item.price }}</div>
        </div>
      </div>
    </k-dialog>
  </div>
</template>

<script>
import hqSearchDown from '@/components/hqSearchDown' // 下拉搜索
import Pagination from '@/components/Pagination'

import { ListToConfirmData, toConfirmDetails, sumToObtain, sumPrice, select, customsPass } from '@/api/levelActivity/index.js'
export default {
  components: { Pagination, hqSearchDown },
  dicts: ['IDENTITY_TYPE'],
  filters: {
    roomTypeFilter(str) {
      if (str == 2) {
        return '玩家对战房'
      } else if (str == 3) {
        return '主播对战房'
      } else if (str == 4) {
        return 'AI对战房'
      } else {
        return '啥也不是'
      }
    }
  },
  data() {
    return {
      selectOpts: [
        {
          label: '房间ID',
          rigth: false,
          value: 'roomId'
        },
        {
          label: '用户名',
          rigth: true,
          value: 'mobile'
        }
      ],
      listQuery: {
        pager: {
          pageNo: 1,
          pageSize: 10,
          totalRows: '',
          start: ''
        },
        // fenceOffFlag: undefined, // 加赛
        identityBelong: undefined, // 身份所属
        activityId: undefined, // 活动主题
        checkpoint: undefined, // 关卡
        checkpointStatus: undefined, // 关卡状态
        getStatus: undefined, // 领取状态
        roomType: undefined, // 房间类型
        unlockStartTime: undefined,
        unlockEndTime: undefined, // 解锁时间
        battleStartTime: undefined,
        battleEndTime: undefined, // 对战时间
        sort: undefined,
        direction: undefined // asc | desc
      },
      timeValue: '',
      timeCotinue: '',
      listData: [],
      totalRows: 0,

      // 房间详情
      detailData: {},
      // 累计获得
      accumulateData: [],

      detailsShow: false,
      accumulateShow: false,

      checkpoint_price: '',
      open_price: '',
      total_price: '',
      // 活动关卡列表
      activitylist: [],
      getCustomsPassList: []
    }
  },

  watch: {
    timeValue(val) {
      this.listQuery.unlockStartTime = this.timeValue ? this.timeValue[0] : null
      this.listQuery.unlockEndTime = this.timeValue ? this.timeValue[1] : null
    },

    timeCotinue(val) {
      this.listQuery.battleStartTime = this.timeCotinue ? this.timeCotinue[0] : null
      this.listQuery.battleEndTime = this.timeCotinue ? this.timeCotinue[1] : null
    }
  },
  created() {
    this.loadData()
    this.tableDate()
    this.getselect()
  },

  methods: {
    openCheckpoint() {
      this.$refs.hqSearchDown.searchFun()
      this.getCustomsPass(this.listQuery.activityId)
    },
    getselect() {
      select().then(res => {
        this.activitylist = res.data.data
      })
    },

    getCustomsPass(activityId) {
      customsPass({ activityId }).then(res => {
        this.getCustomsPassList = res.data
      })
    },

    loadData() {
      ListToConfirmData(this.listQuery).then(res => {
        this.listData = res.data.rows
        this.totalRows = res.data.totalRows
        this.checkpoint_price = ''
        this.open_price = ''
        this.total_price = ''
        this.tableDate()
      })
    },
    tableDate() {
      // if (!this.authorityHandle(199)) return
      this.$nextTick(() => {
        const html5 = this.$refs.multipleTable.$refs.footerWrapper
          .querySelector('.el-table__footer')
          .querySelectorAll('td')[5]
          .querySelector('.cell')
        html5.innerHTML = `${this.checkpoint_price !== '' ? this.checkpoint_price : ''} <a  style="text-decoration: underline;color: blue"><i class="el-icon-refresh"></i></a>`
        html5.onclick = () => {
          sumPrice({ field: 'checkpoint_price', ...this.listQuery }).then(res => {
            this.checkpoint_price = res.data
            this.tableDate()
          })
        }
        const html6 = this.$refs.multipleTable.$refs.footerWrapper
          .querySelector('.el-table__footer')
          .querySelectorAll('td')[6]
          .querySelector('.cell')
        html6.innerHTML = `${this.open_price !== '' ? this.open_price : ''} <a  style="text-decoration: underline;color: blue"><i class="el-icon-refresh"></i></a>`
        html6.onclick = () => {
          sumPrice({ field: 'open_price', ...this.listQuery }).then(res => {
            this.open_price = res.data
            this.tableDate()
          })
        }
        const html7 = this.$refs.multipleTable.$refs.footerWrapper
          .querySelector('.el-table__footer')
          .querySelectorAll('td')[7]
          .querySelector('.cell')
        html7.innerHTML = `${this.total_price !== '' ? this.total_price : ''} <a  style="text-decoration: underline;color: blue"><i class="el-icon-refresh"></i></a>`
        html7.onclick = () => {
          sumPrice({ field: 'total_price', ...this.listQuery }).then(res => {
            this.total_price = res.data
            this.tableDate()
          })
        }
      })
    },

    /**
     * 合计
     * @param {obj} param
     */
    getSummaries(param) {
      const { columns } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          // 第一列
          sums[index] = '总计'
        } else if (column.property === 'goodsPrice') {
          sums[index] = ''
        }
      })
      return sums
    },

    // 表格的排序条件发生变化的时候会触发该事件
    sortChange(column, prop, order) {
      this.listQuery.sort = column.prop
      if (column.order === 'ascending') {
        this.listQuery.direction = 'asc'
      } else if (column.order === 'descending') {
        this.listQuery.direction = 'desc'
      }
      this.$refs.hqSearchDown.searchFun()
    },

    // 搜索查询事件
    handleFilter(v, type) {
      const listQuery = { ...this.listQuery, ...v }
      this.listQuery = listQuery
      this.loadData()
    },

    // 房间详情
    toDetails(row) {
      if (row.roomId == null) {
        this.$message.error('房间未开始闯关')
        return
      } else {
        toConfirmDetails({ roomId: row.roomId }).then(res => {
          if (res.data.lose.goodsNames !== null && res.data.win.endGoodNames != null) {
            this.detailData = res.data
            this.detailsShow = true
          } else {
            this.$message.error('闯关正在进行中')
          }
        })
      }
    },

    // 累计获得
    toAccumulate(row) {
      console.log(row)
      if (row.roomId == null) {
        this.$message.error('房间未开始闯关')
        return
      } else {
        sumToObtain({ id: row.id }).then(res => {
          if (res.data.length) {
            this.accumulateData = res.data
            this.accumulateShow = true
          } else {
            this.$message.error('闯关正在进行中')
          }
        })
      }
    }
  }
}
</script>
<style>
.sortable-ghost {
  opacity: 0.8;
  color: #fff !important;
  background: #3b425d !important;
}
</style>
<style lang="scss" scoped>
$mainColor: #3b425d; // 主色调
$disabledColor: #909399; //禁用色
$hoverColor: #1D143C; // 鼠标停留主色调浅色

.filter-container {
  width: 100%;
  margin-bottom: 20px;
  margin-bottom: 40px;

  .filter-item {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 20px;
    margin-right: 30px;
  }

  .right-item {}

  .kInput {
    position: absolute;
    right: 20px;
  }

  .filter-title {
    height: 48px;
    line-height: 48px;
    font-size: 16px;
    font-weight: 500;
    margin-right: 10px;
    color: #14162e;
  }

  .user-item {
    margin-left: 10px;
    margin-right: 20px;
  }

  .user-status,
  .account-status {
    margin-right: 20px;
  }
}

.op-container {
  margin: 20px;
  overflow: hidden;
  min-height: 500px;
}

.details_dialog {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin: 40px 80px;

  .el-form {
    width: 100%;
  }
}

.details_box {
  width: 900px;
  transform: translateY(-20px);
  padding: 0 10px;
  box-sizing: border-box;
  display: flex;
  font-size: 16px;

  .details_title {
    width: 240px;
    border: 1px solid #ccc;
    box-sizing: border-box;

    .title-item {
      text-align: center;
      height: 50px;
      line-height: 50px;
      border-bottom: 1px solid #ccc;
      box-sizing: border-box;

      &.oaa {
        height: 80px;
        line-height: 80px;
      }
    }
  }

  .details_data {
    width: 350px;
    border: 1px solid #ccc;
    box-sizing: border-box;

    .data-item {
      text-align: center;
      height: 50px;
      line-height: 50px;
      border-bottom: 1px solid #ccc;
      padding: 0 10px;
      box-sizing: border-box;

      span {
        display: -webkit-box; //将对象作为弹性伸缩盒子模型显示。
        line-height: 1.7em;
        align-items: center;
        -webkit-box-orient: vertical; //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
        -webkit-line-clamp: 3; //限制行数
        overflow: hidden; //超出部分隐藏
        text-overflow: ellipsis; //用一个省略号代替超出的内容
        font-size: 14px;
      }

      &.oaa {
        height: 80px;
        line-height: 80px;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .text {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }

    &.left {
      border-left: none;
    }
  }

  .borderNone {
    border: none !important;
  }
}

.accumulate_dialog {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin: 40px 80px;

  .el-form {
    width: 100%;
  }
}

.accumulate_box {
  width: 800px;
  transform: translateY(-20px);
  padding: 0 10px;
  box-sizing: border-box;
  font-size: 16px;

  .accumulate-item {
    display: flex;
    border: 1px solid #ccc;
    height: 80px;
    border-bottom: none;

    .single {
      height: 80px;
      line-height: 80px;
      border-right: 1px solid #ccc;
      text-align: center;
      padding: 0 10px;
      box-sizing: border-box;

      &.level {
        width: 150px;
      }

      &.goods {
        width: 400px;
        display: flex;
        justify-content: center;
        align-items: center;

        span {
          display: -webkit-box; //将对象作为弹性伸缩盒子模型显示。
          line-height: 1.7em;
          align-items: center;
          -webkit-box-orient: vertical; //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
          -webkit-line-clamp: 3; //限制行数
          overflow: hidden; //超出部分隐藏
          text-overflow: ellipsis; //用一个省略号代替超出的内容
          font-size: 14px;
        }
      }

      &.price {
        width: 250px;
        border-right: none;
      }
    }

    &:last-child {
      border-bottom: 1px solid #ccc;
    }
  }
}
</style>
